.component {

  &-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    background: $colorWhite;
    width: calc(100vw - 64px);
    box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 16px;

    .component-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 22px;

      &-center {
        font-size: $fontSizeLg;
        color: $textColorTitle;
        line-height: 24px;
        font-weight: 600;
      }

      &-right {
        display: flex;
        align-items: center;

        image {
          width: 12px;
          height: 12px;
          vertical-align: bottom;
        }
      }
    }

    .component-footer {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      height: 56px;
      border-top: 1px solid $lineColor;

      &-cancel, &-confirm {
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: $fontSizeLg;
        color: $textColorRemark;
        text-align: center;
        font-weight: 400;
      }

      &-confirm {
        color: $textColor;
        border-left: 1px solid $lineColor;
      }
    }
  }

  &-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: rgba(24, 24, 26, 0.30);
  }

}
